<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VueStudyDemo</title>
</head>
<body>
<script src="https://vuejs.org/js/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
    <div><a href="index.html">返回首页</a></div><hr>
    <h1>Hello App</h1>
    <ul>
        <!--路由链接标签-->
        <li>
            <router-link to="/user/foo/">User/foo</router-link>
        </li>
        <li>
            <router-link to="/user/bar">User/bar</router-link>
        </li>
        <li>
            <router-link to="/user/foo/profile">User profile</router-link><br>
            <router-link to="/user/foo/posts">User posts</router-link>
        </li>
    </ul>
    <!--路由视图窗器,可以称为一个插口，或者outlet-->
    <router-view></router-view>
</div>

<script>
    /* 路由与子组件形成一个映射关系，通过router-view容器来装载对应的组件（与url的#后面的部分（即路由）对应），
    * 子路由映射的子组件必须位置父路由映射的父组件中*/
    const User = {
        // 更多暴露的参数：$route.query(如&name=tony),$route.hash
        // 任何模板必须有一个根节点。即套在某一个div下
        template: `<div><div>user {{ $route.params.id }}</div><router-view></router-view></div>`,
    }
    const UserHome = { template: '<div>Home</div>' }
    const UserProfile = {
        template: `<div>User Profile</div>`,
    }

    const UserPosts = {
        template: `<div>User Posts</div>`,
    }

    const router = new VueRouter({
        routes: [
            // 路由匹配模型：更多的形式： /user/:username/post/:post_id
            // 合用参数的路由时，组件实例将被重用，意思是组件使用同一个实例，或同一对象
            // 所以，不会触发生命周期钩子（如mounted）。一般使用watch或beforeRouteUpdate。具体用法待验证
            {
                path: '/user/:id',
                component: User,
                children: [
                    { path: '', component: UserHome },
                    { path: 'profile', component: UserProfile},
                    { path: 'posts', component: UserPosts}
                ]
            }
        ]
    })
    const app = new Vue({
        router
    }).$mount('#app')
</script>
</body>
</html>